<!-- 执行周期--任务执行时间---小组件 -->
<template>
  <px-form-item label="任务执行时间" prop="cycleTime" :rules="{ required: props.isRequired, message: '请选择任务事件', trigger: 'blur' }">
    <px-select v-model="cycleTimeVal" multiple placeholder="请选择执行任务时间" @change="changeCycleTime" filterable>
      <px-option v-for="item in cycleTimeList" :key="item.val" :label="item.label" :value="item.val" />
    </px-select>
  </px-form-item>
</template>

<script setup lang="ts">
import { onMounted, watch, ref } from "vue";

// 父级方法和值
const emits = defineEmits(["changeCycleTime"]);
const props = defineProps(["cycleTime", "isRequired"]);

const cycleTimeVal = ref([]);
const cycleTimeList = ref([]);

watch(
  () => props.cycleTime,
  val => {
    if (props.cycleTime) {
      cycleTimeVal.value = props.cycleTime.split(",");
    } else {
      cycleTimeVal.value = [];
    }
  },
  { immediate: true }
);
// 获取巡检组下拉列表
const queryCycleTimeSelect = () => {
  for (let i = 0; i < 24; i++) {
    cycleTimeList.value.push({ val: String(i), label: i < 10 ? `0${i}:00` : `${i}:00` });
  }
};
queryCycleTimeSelect();
onMounted(() => {});

// 改变巡检组值，传值给父级并做改变
const changeCycleTime = () => {
  emits("changeCycleTime", cycleTimeVal.value);
};
</script>
